<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" 
	xmlns:of="http://omnifaces.org/functions"
	template="/WEB-INF/templates/template.xhtml">
	
<ui:define name="headIncludes">
	<f:event listener="#{agendamentoBean.initializeForm(param.numOS)}" type="preRenderView"/>

<script type="text/javascript">
PrimeFaces.locales['pt'] = {  
		closeText: 'Fechar',  
		prevText: 'Anterior',  
		nextText: 'Próximo',  
		currentText: 'Começo',  
		monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],  
		monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun', 'Jul','Ago','Set','Out','Nov','Dez'],  
		dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'],  
		dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb'],  
		dayNamesMin: ['D','S','T','Q','Q','S','S'],  
		weekHeader: 'Semana',  
		firstDay: 0,  
		isRTL: false,  
		showMonthAfterYear: false,  
		yearSuffix: '',  
		timeOnlyTitle: 'Só Horas',  
		timeText: 'Tempo',  
		hourText: 'Hora',  
		minuteText: 'Minuto',  
		secondText: 'Segundo',  
		ampm: false,  
		month: 'Mês',  
		week: 'Semana',  
		day: 'Dia',  
		allDayText : 'Todo o Dia'
}

</script>
</ui:define>

 
	
	<ui:define name="pageName">Agendamento</ui:define>
	
	<ui:define name="buttons">
	</ui:define>
	
	<ui:define name="content">
		<p:panel>
			<div>
				<p:messages id="messageFormOS" closable="true"/>
				<h:panelGrid columns="7" style="padding:5px;" id="panel1">
					<h:outputText value="Data"/>
					<h:outputText value="Funcionário"/>
					<h:outputText value="" />
					<h:outputText value="Serviço" />
					<h:outputText value="" />
					<h:outputText value="Cliente"/>	
					<h:outputText value=""/>	
					
					<p:calendar value="#{agendamentoBean.data}" pattern="dd/MM/yyyy" style="width:80px;" readonlyInput="true">
						<p:ajax event="dateSelect" listener="#{agendamentoBean.handleDateSelect}" oncomplete="tableAgendaVar.unselectAllRows();" />
					</p:calendar>

					<p:autoComplete id="inputFuncionario" var="funcionario" value="#{agendamentoBean.currentAgendamento.funcionario}"
						itemLabel="#{funcionario.nome}" itemValue="#{funcionario}" size="45"
						converter="funcionarioConverter" completeMethod="#{agendamentoBean.getFuncionarioByQuery}">
						<p:ajax event="itemSelect" update="inputFuncionario" listener="#{agendamentoBean.handleInputFuncionarioChange}"/>
						<p:ajax event="blur" process="@this inputFuncionario" listener="#{agendamentoBean.handleInputFuncionarioChange}"/>
					</p:autoComplete>
				
					<p:commandButton icon="ui-icon-search" style="height:24px;" immediate="true" actionListener="#{agendamentoBean.openDialogListFuncionario}"/>
					
					<p:autoComplete id="inputServico" var="servico" value="#{agendamentoBean.currentAgendamento.servico}"
						itemLabel="#{servico.descricao}" itemValue="#{servico}" size="45"
						converter="servicoConverter" completeMethod="#{agendamentoBean.getServicoByQuery}">
						<p:ajax event="itemSelect" update="inputServico" />
						<p:ajax event="blur" process="@this inputServico" listener="#{agendamentoBean.handleInputServicoChange}"/>
					</p:autoComplete>
				
					<p:commandButton icon="ui-icon-search" style="height:24px;" immediate="true" actionListener="#{agendamentoBean.openDialogListServico}"/>		
								
					<p:autoComplete id="inputCliente" var="cliente" value="#{agendamentoBean.currentAgendamento.cliente}"
						itemLabel="#{cliente.nome}" itemValue="#{cliente}" size="45" 
						converter="clienteConverter" completeMethod="#{agendamentoBean.getClienteByQuery}">
						<p:ajax event="itemSelect" update="@this" />
					</p:autoComplete>
						
					<p:commandButton icon="ui-icon-search" style="height:24px;" immediate="true" actionListener="#{agendamentoBean.openDialogListCliente}" id="buttonAddCliente"/>
				</h:panelGrid>
				
				<p:dataTable id="tableAgenda" value="#{agendamentoBean.listAgenda}" rowIndexVar="rowIndex" widgetVar="tableAgendaVar" 
					var="agenda" selection="#{agendamentoBean.selectedServicoOS}" rowKey="#{agenda.hora}" >
					
					<p:ajax event="rowSelectRadio" listener="#{agendamentoBean.onSelectRow}" oncomplete="tableAgendaVar.unselectAllRows();" />
<!--  					<p:ajax event="rowUnselect" listener="#{agendamentoBean.onRowUnselect}" /> -->
										
 					<p:column selectionMode="single" width="2%" disabledSelection="#{agenda.cliente.nome != null}"/>
					
 					<p:column headerText="Horário" width="50" style="text-align:center;">
 						<h:outputText value="#{agenda.hora.getTime()}"> 
 							<f:convertDateTime pattern="HH:mm" locale="pt" timeZone="America/Sao_Paulo"/> 
						</h:outputText>
 					</p:column>
 					<p:column headerText="Cliente">
						<h:outputText value="#{of:abbreviate(agenda.cliente.nome, 40)}"/>
 					</p:column>
 					<p:column headerText="Serviço">
 						<h:outputText value="#{of:abbreviate(agenda.servico.descricao, 30)}"/>
 					</p:column>
 					
 					<p:column headerText="Funcionário">
 						<h:outputText value="#{of:abbreviate(agenda.funcionario.nome, 30)}"/>
 					</p:column>
 					
 					<p:column headerText="" width="10">
 						<p:commandButton icon="ui-icon-trash" style="width:24px; height:24px;" rendered="#{agenda.cliente.nome != null and !agenda.fechado}" 
 							immediate="true" actionListener="#{agendamentoBean.removeAgendamento(agenda.id)}" title="Remover marcação"/>
 						<p:spacer width="10px" />
 						<p:commandButton icon="ui-icon-check" style="width:24px; height:24px;" rendered="#{agenda.cliente.nome != null and !agenda.fechado}" 
 							immediate="true" actionListener="#{agendamentoBean.changeToCloseOS(rowIndex)}" title="Gerar ordem de serviço"
 							/>
 					</p:column>
 				</p:dataTable>

			</div>
		</p:panel>	
		
	</ui:define>
	
	<ui:define name="popups">	
		<ui:include src="listServico.xhtml"/>
		<ui:include src="listFuncionario.xhtml"/>
		<ui:include src="listCliente.xhtml"/>
		<ui:include src="dialogOrdemServico.xhtml"/>
		<ui:include src="formCidade.xhtml"/>
		<ui:include src="listEstado.xhtml"/>
		<ui:include src="formEstado.xhtml"/>
		<ui:include src="listPais.xhtml"/>
		<ui:include src="formPais.xhtml"/>
		<ui:include src="listCidade.xhtml"/>
		<ui:include src="formCliente.xhtml"/>
		<ui:include src="formServico.xhtml"/>
		<ui:include src="formFuncionario.xhtml"/>
		<ui:include src="formCargo.xhtml"/>
		<ui:include src="listCargo.xhtml"/>
		<ui:include src="listServicoAddFuncionario.xhtml"/>
		<ui:include src="listFuncionarioAddServico.xhtml"/>
	</ui:define>
</ui:composition>